body {
    background-color: #142537;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    color: #fff;
}

.verticalLine {
    position: fixed;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #087ec7;
    box-shadow: 0 0 5px 5px #122c54;
    z-index: -1;
}

.verticalLine > div {
    position: absolute;
    left: -4px;
    width: 9px;
    height: 9px;
    background-color: #fff;
    border-radius: 2px;
}

.verticalLine > div:first-child {
    top: 15vh;
}

.verticalLine > div:last-child {
    bottom: 15vh;
}

.section {
    float: left;
    overflow: hidden;
    height: 100%;
}

.aside {
    /*width: 27vw;*/
    width: 18vw;
}

.center {
    /*width: 46vw;*/
    width: 64vw;
    padding: 0 8px;
}

.left {
    padding: 10px 8px 10px 1vw;
}

.right {
    padding: 10px 1vw 10px 8px;
}

.left > section {
    width: 100%;
}

.left-top {
    height: 20%;
}

.left-middle,
.left-bottom {
    height: 40%;
}

.status {
    position: relative;
    padding: 0 4px 10px;
}

.status > span {
    position: absolute;
    display: block;
    width: 2vw;
    height: 3vh;
    background-color: #0595eb;
    z-index: -1;
}

.status > div {
    width: 100%;
    height: 100%;
    background-image: url("../images/bg.png");
}

.boxTitle {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 35px;
    background-color: #133450;
}

.boxTitleLeft,
.boxTitleRight {
    position: absolute;
    top: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.boxTitleLeft {
    left: 0;
    width: 30px;
    background-image: url("../images/box_title_left.png");
}

.boxTitleRight {
    right: 0;
    width: 20px;
    background-image: url("../images/box_title_right.png");
}

.boxTitle + div {
    width: 100%;
    height: calc(100% - 30px);
    padding: 5px 0;
}

.center > header {
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-image: url("../images/title_border.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    color: #cdddf7;
    font-size: 25px;
    font-weight: bold;
}

.center-middle {
    height: 30%;
    padding: 10px 0;
}

.weather {
    height: calc(100% - 50px);
}

.info {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}

.info > div {
    flex: 1;
}

.info > div:last-child {
    flex: 2;
}

.center-bottom {
    height: calc(70% - 60px);
    padding: 0 10px;
}

.right > section {
    height: 50%;
}

.center-content {
    height: calc(100% - 90px);
    margin-top: 20px;
}

.center-content > div {
    width: 100%;
    height: 50%;
}

.center-content section {
    float: left;
    width: calc(100% / 3);
    height: 100%;
}